<template>
	<div ref="mescrollRef" class="mescroll">
		<slot></slot>
	</div>
</template>

<script>
    import {ref, onMounted, onUnmounted, nextTick} from 'vue'

    export default {
        name: "PullRefresh",
        props: {
            httpOption: Object,
        },
        setup(props) {
            const {loadData, refreshSucc, refreshFail, loadMoreSucc, loadMoreFail} = props.httpOption
            const mescrollRef = ref()
            const Mescroll = require('/src/libs/mescroll-1.4.2')
            let mescroll
            const initMescroll = () => {
                mescroll = new Mescroll(mescrollRef.value, {
                    auto: false,//是否在初始化完毕之后自动执行一次下拉刷新的回调
                    isBounce: false,//是否允许ios的bounce回弹;默认true,允许回弹 (v 1.3.0新增)
                    isBoth: true,//下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载
                    up: {
                        callback(page) {
                            const {num} = page
                            loadData(num, {
                                onSucc(code, msg, info) {
                                    if (num === 1) {
                                        if (refreshSucc) {
                                            refreshSucc(code, msg, info)
                                        }
                                        nextTick(() => {
                                            if (mescroll) {
                                                mescroll.endSuccess()
                                            }
                                        })
                                    } else {
                                        let dataSize = 0
                                        if (loadMoreSucc) {
                                            dataSize = loadMoreSucc(code, msg, info)
                                        }
                                        if (dataSize > 0) {
                                            nextTick(() => {
                                                if (mescroll) {
                                                    mescroll.endSuccess()
                                                }
                                            })
                                        } else {
                                            nextTick(() => {
                                                if (mescroll) {
                                                    mescroll.endSuccess(0, false)
                                                }
                                            })
                                        }
                                    }
                                },
                                onFail() {
                                    if (num === 1) {
                                        if (refreshFail) {
                                            refreshFail()
                                        }
                                    } else {
                                        if (loadMoreFail) {
                                            loadMoreFail()
                                        }
                                    }
                                    nextTick(() => {
                                        if (mescroll) {
                                            mescroll.endErr()
                                        }
                                    })
                                }
                            })
                        },
                    }
                })
            }


            onMounted(() => {
                nextTick(initMescroll)
            })
            onUnmounted(() => {
                if (mescroll) {
                    mescroll.destroy()
                }
            })

            return {
                mescrollRef,
            }
        }
    }
</script>
